<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<h1>百度云人脸识别登录</h1>
<div id="name">
    用户名：<input type="text" name="username" id="username" placeholder="可以不填"/>
</div>
<div class="camera">
    <video id="video" width="350" height="200" src="" autoplay></video>
    <canvas id="canvas" width="350" height="200"></canvas>
</div>
<div class="log">
    <button id="login">登录</button>
    <br>
</div>
<div class="contrl">
    <button id="start" onclick="startAuto()">启动自动登录</button>
    <button id="stop" onclick="stopAuto()">暂停自动登录</button>
    <button id="toRegister" onclick="location.href='register'">人脸采集</button>
</div>
<script src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript">
    var video = document.getElementById('video');
    var userContext = canvas.getContext('2d');
    var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
    getUserMedia.call(navigator,{video:true,audio:false},function (localMediaStream){
        video.srcObject = localMediaStream;
    },function (e){
        console.log('Error: ', e);
    })
    var btn = document.getElementById('login');
    function toLogin(){
        userContext.drawImage(video,0,0,350,200);
        var userImgSrc = document.getElementById('canvas').toDataURL('image/jpg');
        var faceBase = userImgSrc.split(',')[1];
        $.ajax({
            url: "login",
            type: "post",
            data:{"faceBase":faceBase},
            dataType:"json",
            success:function (result){
                if(result.num=="1"){
                    alert("登录成功！欢迎你，尊敬的用户："+result.username);
                    location.href = "mainPage";
                }else{
                    alert("登录失败！请检查您的用户名或重新采集人脸！");
                }
            }
        })
    }
    btn.onclick = toLogin();
    var timer;
    function startAuto(){
        timer = setInterval(toLogin,3000);
    }
    startAuto();
    function stopAuto(){
        clearInterval(timer);
    }
</script>
</body>
</html>